<template>
  <div id="app">
    <div class="row">
      <hm-button @click="fn">按钮</hm-button>
      <hm-button type="primary">按钮</hm-button>
      <hm-button type="success">按钮</hm-button>
      <hm-button type="info">按钮</hm-button>
      <hm-button type="warning">按钮</hm-button>
      <hm-button type="danger">按钮</hm-button>
    </div>
    <div class="row">
      <hm-button plain>按钮</hm-button>
      <hm-button plain type="primary">按钮</hm-button>
      <hm-button plain type="success">按钮</hm-button>
      <hm-button plain type="info">按钮</hm-button>
      <hm-button plain type="warning">按钮</hm-button>
      <hm-button plain type="danger">按钮</hm-button>
    </div>
    <div class="row">
      <hm-button plain round>按钮</hm-button>
      <hm-button plain round type="primary">按钮</hm-button>
      <hm-button plain round type="success">按钮</hm-button>
      <hm-button plain round type="info">按钮</hm-button>
      <hm-button plain round type="warning">按钮</hm-button>
      <hm-button plain round type="danger">按钮</hm-button>
    </div>
    <div class="row">
      <hm-button plain circle>拆</hm-button>
      <hm-button plain circle type="primary">拆</hm-button>
      <hm-button plain circle type="success">拆</hm-button>
      <hm-button plain circle type="info">拆</hm-button>
      <hm-button plain circle type="warning">拆</hm-button>
      <hm-button plain circle type="danger">拆</hm-button>
    </div>
    <div class="row">
      <hm-button plain icon="hm-icon-check" circle></hm-button>
      <hm-button plain icon="hm-icon-check" circle type="primary"></hm-button>
      <hm-button plain icon="hm-icon-check" circle type="success"></hm-button>
      <hm-button plain icon="hm-icon-check" circle type="info"></hm-button>
      <hm-button plain icon="hm-icon-check" circle type="warning"></hm-button>
      <hm-button plain icon="hm-icon-check" circle type="danger"></hm-button>
    </div>
    <div class="row">
      <hm-button @click="fn" disabled icon="delete">按钮</hm-button>
      <hm-button icon="delete" disabled type="primary">按钮</hm-button>
      <hm-button icon="delete" disabled type="success">按钮</hm-button>
      <hm-button icon="delete" disabled type="info">按钮</hm-button>
      <hm-button icon="delete" disabled type="warning">按钮</hm-button>
      <hm-button icon="delete" disabled type="danger">按钮</hm-button>
    </div>
    <hm-button type="primary" @click="visible = true">按钮</hm-button>
      <hm-dialog width="80%" top="10px" :visible.sync="visible">
        <template v-slot:title>
          <h3>我是标题</h3>
        </template>
        <template>
          <ul>
            <li>sx</li>
            <li>vd</li>
            <li>cd</li>
          </ul>
        </template>
        <template v-slot:footer>
          <hm-button @click="visible = false">取消</hm-button>
          <hm-button type="primary" @click="visible = false">确定</hm-button>
        </template>
      </hm-dialog>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      visible: false
    }
  },
  methods: {
    fn () {
      console.log('点击了按钮')
    }
  }
}
</script>

<style lang="scss">
  .row {
    margin-bottom: 20px;
    .hm-button {
      margin-right: 20px;
    }
  }
</style>
